<template>
  <div id="ConfirmOrderDetail">
    <span style="font-size:30px;color:#58B7FF">订单详情</span>
    <label class="setTime">{{countDown}}</label>
    <div class="div_table">
      <el-table
        :data="boothDatas"
        fit max-height="350">
        <el-table-column prop="stalls_name"
                         label="摊位名称" align="center">
        </el-table-column>
        <el-table-column prop="date_schedule"
                         label="预约排期开始时间" align="center">
        </el-table-column>
        <el-table-column prop="date_schedule_end"
                         label="预约排期结束时间" align="center">
        </el-table-column>
        <el-table-column prop="count"
                         label="数量" align="center">
        </el-table-column>
        <el-table-column prop="unitPrice"
                         label="单价" align="center">
        </el-table-column>
      </el-table>
    </div>
    <div class="div_TatolMsg">
      <div>
        摊位个数：
        <span style="color:#f40;font-weight:bolder">
              {{boothDatas.length}}</span> 个
      </div>
      总金额：<span style="color:#f40;font-weight:bolder">￥0.00</span>
    </div>
    <div class="div_SurePay">
      <el-button type="primary" @click="Comfirm" style="float:right;width:15%">确认支付</el-button>
      <span @click="Cancel" class="return">
        <i class="fa fa-reply iconstyle"></i>返回上一步选择摊位</span>
    </div>
  </div>
</template>
<script>
  import { postDataToServer } from '../../assets/js/post.js'

  export default {
    name: 'ConfirmOrderDetail',
    props: ['reservationData'],
    data () {
      return {
        countDown: '',
        leftTime: '900',
        minute: '',
        second: '',
        sumPrice: 0,
        boothDatas: []
      }
    },
    created () {
      this.getConfirmOrderDetailData()
      this.showTime()
    },
    methods: {
      showTime () {
        this.minute = parseInt(this.leftTime / 60 % 60)
        this.second = parseInt(this.leftTime % 60)
        this.countDown = '请在' + this.minute + '分钟' + this.second + '秒内完成支付'
        if (this.leftTime <= 0) {
          this.$emit('returnStep', 0)
        } else {
          this.leftTime--
          localStorage.setItem('orderTime', 900)
          setTimeout(this.showTime, 1000)
          if (this.leftTime === 3) {
            this.$message({
              showClose: true,
              duration: '4000',
              countDown: '订单支付超时,将在三秒后返回上一步',
              type: 'warning'
            })
          }
        }
      },
      getConfirmOrderDetailData () {
        let _this = this
        let param = new Object()
        // param.id = _this.reservationData.id;
        param.reservation_number = _this.reservationData.reservation_number
        postDataToServer('STALLS_SCHEDULE_GET', param)
          .then((data) => {
            if (data.status === 0) {
              data.data_list.count = 1
              _this.boothDatas.push(data.data_list)
            } else {
              this.$message({
                message: data.message,
                type: 'error'
              })
            }
          }).catch((error) => {
          this.$message({
            message: error,
            type: 'error'
          })
        })
      },
      Comfirm () {
        this.$emit('returnStep', true)
      },
      Cancel () {
        let _this = this
        let param = new Object()
        param.reservation_number = _this.reservationData.reservation_number
        postDataToServer('STALLS_SCHEDULE_DEL', param)
          .then((data) => {
            if (data.status === 0) {
              this.$emit('returnStep', 0)
            } else {
              this.$message({
                message: data.message,
                type: 'error'
              })
            }
          }).catch((error) => {
          this.$message({
            message: error,
            type: 'error'
          })
        })
      }
    },
    watch: {
      reservationData () {
        this.getConfirmOrderDetailData()
      }
    }
  }
</script>

<style scoped>
  .setTime {
    font-size: 20px;
    color: #f40;
    line-height: 50px;
    float: right;
    margin-right: 3em;
  }

  .div_table {
    width: 95%;
    float: left;
  }

  .div_TatolMsg {
    float: left;
    line-height: 50px;
    width: 95%;
    height: 100px;
    text-align: right;
  }

  .div_SurePay {
    width: 95%;
    float: left;
    height: 40px;
  }

  .iconstyle {
    color: #36C;
    margin-right: 10px;
  }

  .return {
    float: right;
    margin-right: 30px;
    font-size: 13px;
    cursor: pointer;
    color: #1d94d1;
    line-height: 40px;
  }
</style>
